如何优雅的使用MuiPlayer编写出一款精美可操作的视频播放控件，带防挂机或弹题功能，适合网课等相关业务场景

您所在的位置：网站首页 › book player怎么用 › 如何优雅的使用MuiPlayer编写出一款精美可操作的视频播放控件，带防挂机或弹题功能，适合网课等相关业务场景

如何优雅的使用MuiPlayer编写出一款精美可操作的视频播放控件，带防挂机或弹题功能，适合网课等相关业务场景

2024-07-09 23:32| 来源: 网络整理| 查看: 265

MuiPlayer 是一款 HTML5 视频播放插件，其默认配置了精美可操作的播放控件，涉及了常用的播放场景，例如全屏播放、播放快进、循环播放、音量调节、视频解码等功能。介绍特点文档子组件的创建一、引用MuiPlayer二、创建模板结构三、Javascript 代码1、props：2、mounted：四、讲解代码父组件的调用结束语 Tips:这篇文章编写的初衷是为了让更多的人知道MuiPlayer这款精美的框架，以及更方便的投入到使用MuiPlayer中来，并无其他用意，也没有对MuiPlayer的官方文档进行更改，如果MuiPlayer或大家觉得这篇文章的出现不合时宜，请联系我删除，如果在使用中有什么疑问，欢迎大家留言讨论。如果觉得本篇文档存在不对的地方，欢迎大家留言指正，谢谢~~ 本篇的使用介绍是在开发时编写的，内容过于粗糙，不喜勿喷。需要了解Vue和Video的原理及事件

介绍

1、MuiPlayer 是一款 HTML5 视频播放插件，其默认配置了精美可操作的的播放控件，涉及了常用的播放场景，例如全屏播放、播放快进、循环播放、音量调节、视频解码等功能。 2、播放器的设计兼容了在 PC、Mobile 端运行，提供了 “移动端” 以及 “PC端” 两类扩展插件，因此你也可应用于在 Android、Ios 的 Webview 中使用。 3、如果你的应用是运行在 html5 plus (opens new window)环境中，那么你使用该播放插件将会默认得到更多原生 api 的支持，例如播放控制设备音量、全屏时横竖屏播放、沉浸式播放等。你也可以使用原生与网页交互的方式来控制视频以及设备功能，MuiPlayer 提供了所有事件触发的回调函数，你需要在这里作一些自己的控制。

特点

MuiPlayer 帮助我们解决了日常 H5 Video 应用开发中的常见的一些大量问题： 1、各浏览器平台播放 ui 不能统一 2、ui 扩展之间以及状态处理容易产生冲突 3、在不同环境下（android、ios、pc）针对 h5 video api 可能触发事件的时机尽不相同 4、媒体格式存在各种兼容问题，muiplayer 处理了大多数在不同环境下播放的兼容问题 5、重复踩踏在开发 h5 video 过程中的一些坑，我们提供了一套完好的解决方案，让开发者少走一些弯路

文档

具体介绍请前往官方文档查阅，这里就不介绍了废话不多说，上干货~~~~~

子组件的创建一、引用MuiPlayer import './mui-player.min.css' import MuiPlayer from './mui-player.min' import MuiPlayerDesktopPlugin from './mui-player-desktop-plugin.min'

相关资源去官网下载即可>>>传送门

二、创建模板结构 //防挂机或弹题功能

: 插槽，便于接收父级组件发送过来内容

三、Javascript 代码

在export的外层先var一个变量，方便接收实例

var mp; 1、props： { src: { type: String, default: '' }, poster: { type: String, default: '' }, title: { type: String, default: '' }, autoplay: { type: Boolean, default: false, }, muted: { type: Boolean, default: false } } 2、mounted： mp = new MuiPlayer({ container: '#mui-player', title: this.title, src: this.src, poster: this.poster, autoplay: this.autoplay, muted: this.muted, lang: 'zh-cn', volume: 0.6, themeColor: '#55c612', custom: { footerControls: [{ slot: 'nextMedia', // 对应定义的 slot 值 position: 'left', // 显示的位置，可选 left、right tooltip: '下一集', // 鼠标悬浮在控件上显示的文字提示 oftenShow: false, // 是否常显示。 click: function(e) { // 按钮点击事件回调 console.info(e) mp.showToast('next media button click...'); }, style: {}, // 自定义添加控件样式 }], }, plugins: [ typeof MuiPlayerDesktopPlugin == 'function' ? new MuiPlayerDesktopPlugin({ pictureInPicture: false, contextmenu: [{ // 右键菜单组配置 name: 'muiplayer', context: 'MuiPlayer', show: false, }, { name: 'copyPlayUrl', context: '复制视频链接test', zIndex: 0, show: true, click: function(close) { console.info('复制视频链接') } } ], customSetting: [{ functions: '循环播放', name: 'loopPlay', show: false }, { functions: '播放速度', name: 'playbackRate', show: false } ], }) : {} ] }) mp.getControls().forEach(function(value, index) { //遍历video上所有控件 if (value.id == "picture-in-picture" || value.id == "pagefull-switch") value.remove(); //删除画中画和网页内全屏控件 }) this.$emit("mpVideo", mp.video()) 四、讲解代码 * @property {Object} new MuiPlayer(option) 实例化MuiPlayer插件 * @property {String} src 视频源地址 * @property {String} poster 封面路径 * @property {String} title 视频的标题 * @property {Boolean} autoplay 是否自动播放,默认false * @property {Boolean} muted 是否静音 * @property {Boolean} lang 显示语言种类 * @value zh-cn 中文简体 * @property {Number} volume 默认音量 * @value 0-1 音量范围 * @property {String} themeColor 自定义进度条颜色 * ***************************************************** * @property {Object} custom 自定义控件 * @value {Array} headControls 自定义播放器头部按钮组，参数接受一个配置数组，最大可配置对象为5个 * @value slot 对应定义的 slot 值 * @event click 按钮点击事件回调 * @value style 自定义添加控件样式 * @value {Array} footerControls 自定义播放器底部控件组，参数接受一个配置数组，最大可配置对象为5个， * @value slot 对应定义的 slot 值 * @value position 显示的位置，可选 left、right * @value tooltip 鼠标悬浮在控件上显示的文字提示 * @value oftenShow 是否常显示。默认为false，在 mobile 环境下竖屏状态下隐藏，pc环境判下视频容器小于500px时隐藏 * @value click 按钮点击事件回调 * @value style 自定义添加控件样式 * @value {Array} rightSidebar 自定义播放器右侧弹出栏，参数接受一个配置数组，最大可配置对象为5个 * @value slot 对应定义的 slot 值 * @value width 侧栏宽度 {string | number} * ***************************************************** * @property {Object} plugins 添加播放扩展插件 * @property {Object} new MuiPlayerDesktopPlugin(option...) 实例化MuiPlayerDesktopPlugin * @property {Array} customSetting 自定义设置组默认[{functions:'循环播放',name:'loopPlay'},{functions:'播放速度',name:'playbackRate'}] * @value functions 组名称 * @value name 组标识名。如该名称与默认配置组中某个名称相同，那么将重写默认配置组菜单 * @value model 组选择模式，可选 switch | select 默认select * @value selected 是否选中当前选择项默认false * @value show 是否显示默认true * @value zIndex 组显示层级，zIndex越大该组排列顺序越靠前默认0 * @value childConfig 子设置组配置，配置参数同父级设置组参数默认[] * @value onToggle 组选项点击后的回调函数，接收三个参数可供处理动作： * 1、data：当前选择配置项 * 2、selected：函数，必须手动调用该函数来选择项目 * 3、back：函数，调用该函数触发返回父级设置组，参数可接收一个毫秒单位的数字表示延迟返回 * @property {Array} contextmenu 自定义右键菜单默认[{name:'shortcuts',context:'快捷键'},{name:'muiplayer',context:'MuiPlayer'}] * @value name 菜单标识名，如该名称与右击菜单组中某个名称相同，那么将重写默认菜单组 * @value context 右击菜单名称 * @value zIndex 组显示层级，zIndex越大该组排列顺序越靠前 * @value show 是否显示 * @value click 点击后回调函数。【close：函数，主动调用函数可关闭右击菜单】默认callback(close) * @property {Object} thumbnails 缩略图配置默认{} * @property {Number} fullScaling 全屏时控件大小缩放比，取值 >= 1 默认1.2 * @property {Boolean} leaveHiddenControls 鼠标指针移出播放器时是否隐藏控件默认false * ***************************************************** * @event {Funtion()} click.stop 阻止冒泡事件，防止`单`击模态窗单击事件透传到video * @event {Function()} dblclick.stop 阻止冒泡事件，防止`双`击模态窗单击事件透传到video * @event {Function()} getControls 如需隐藏默认的播放、全屏操作控件，可通过 getControls() 方法获取所有控件，然后可自定义行为的 DOM 操作 * @example new MuiPlayer(option...) 父组件的调用

使用子组件的插槽传输内容

我是视频中的弹窗，点击我触发事件

javascript代码片段

data() { return { mySrc: "", //播放路径 myTitle: '', //视频左上角标题 myPoster: '', //视频封面 showTopic: false //默认不展示弹题模态窗 } }, onLoad() { _this = this; setTimeout(function() { //模拟3秒后弹出模态窗，实际开发中应该是随机时间弹出 _this.showTopic = true; //展示答题模态窗 setTimeout(function(){ //弹出模态窗后做一个延迟效果，暂停播放 _video.pause(); }, 500) }, 3000) }, methods: { clickMe() { console.log("点到我了"); _this.showTopic = false; //关闭答题模态窗 }, mpVideo(video){ _video = video; //吐出Video原生媒体实例，其他特殊功能可以使用Video来添加原生事件，例如禁用滚动条、禁用快进快退功能等等 } }

css代码片段【sass】

.content{ width: 500px; height: 300px; margin: 300px auto; } @keyframes fadeIn{ 0%{ opacity:0; transform: scale(1.2); } 100%{ opacity: 1; transform: scale(1); } } .topicModel{ padding: 0 10px; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 9999; background-color: rgba(0, 0, 0, 0.3); display: flex; justify-content: center; align-items: center; animation: fadeIn 0.4s; &-content{ width: 60%; height: 60%; background-color: #FFFFFF; } } 结束语

这款框架非常优秀，它还集成了弹幕等扩展功能，如果您想要大厂那些视频控件还不想花钱的话，可以试试这款MuiPlayer ，超级赞~~~ 最后，欢迎大家指正讨论！！！

【本文地址】

如何优雅的使用MuiPlayer编写出一款精美可操作的视频播放控件，带防挂机或弹题功能，适合网课等相关业务场景

如何优雅的使用MuiPlayer编写出一款精美可操作的视频播放控件，带防挂机或弹题功能，适合网课等相关业务场景

今日新闻

推荐新闻